<template>
  <div class="htd-box">
    <template v-for="(item, index) in htd.htdList">
      <p
        type="flex"
        justify="space-between"
        align="middle"
        :key="index"
        class="contract-p"
        :class="{ 'contract-checked': item.check }"
        @click="chooseContract(index, item, htd.htdList)"
      >
        {{ item.nodeName
        }}<Button
          class="view-btn"
          :class="{ sss: item.check }"
          size="small"
          @click="viewHtdDetial(item.nodeId)"
          >查看</Button
        >
      </p>
    </template>
  </div>
</template>
<script>
import apiObj from '@/api/project-partition.js';
import Bus from '../../../assets/eventbus/eventbus.js';

export default {
  name: 'htd-list',
  data () {
    return {
      project: {
        // 项目名称
      },
      htd: {
        // 合同段名称
        htdName: '',
        // 合同段列表
        htdList: [],
        // 合同段id
        htdId: ''
      },
      // 提交审批按钮状态
      btnDisabled: {
        primary: false
      },
      // 显示类型
      showSwitch: {
        // 项目树划分按钮
        projectPart: false
      }
    };
  },
  props: {
    tree: {
      required: true
    }
  },
  methods: {
    // 获取合同段列表
    async getContractList () {
      try {
        const resp = await apiObj.getContractList();
        const datas = resp.data.data.htds;
        this.project.projectName = resp.data.data.projectName;
        this.htd.htdList = datas;
        console.log('reps合同段列表', resp);
      } catch (error) {}
    },
    // 选择某一条合同段列表
    async chooseContract (index, item, list) {
      this.htd.htdId = item.nodeId;
      this.htd.htdName = item.nodeName;
      this.parentId = item.nodeId;
      this.nodeId = item.nodeId;
      let isChecked = false;
      this.contractStates(list, index);
      this.$emit(
        'getContractTree',
        this.htd.htdId,
        this.parentId,
        this.nodeId,
        isChecked,
        this.btnDisabled.primary,
        this.showSwitch.projectPart,
        true,
        this.htd.htdName
      );

      this.htdAddClass(index, list);
    },
    // 判断当前合同段state状态/locked/normal/review
    contractStates (list, index) {
      // this.$emit('setAddSameLevel', true);
      console.log('tag', list[index].state);
      if (list[index].state === 'review') {
        // review表示正在审核中：
        // 新增按钮组隐藏，提交审批隐藏，（新树）项目树变更隐藏
        // 树不可编辑
        this.btnDisabled.primary = true;
        this.showSwitch.projectPart = false;
      } else if (list[index].state === 'locked') {
        // locked表示新建，未提交：
        // 新增按钮组显示，提交审批显示，（新树）项目树变更隐藏
        // 树可编辑
        this.btnDisabled.primary = false;
        this.showSwitch.projectPart = false;
      } else {
        // normal表示树已被审批通过，正常使用中：
        // 新树新增按钮组隐藏，提交审批隐藏，项目树变更显示
        // 旧树新增按钮组显示，提交审批显示
        // 新树不可编辑，旧树可以编辑
        this.showSwitch.projectPart = true;
        this.btnDisabled.primary = false;
      }
    },

    // 给选中的合同段切换样式
    htdAddClass (index, list) {
      for (let i = 0; i < list.length; i++) {
        list[i].check = false;
      }
      list[index].check = true;
      // if (condition) {
      // } else {
      // }
      // console.log('现在点的是我', index);
    },

    // 查看项目详情
    viewProjectDetial () {
      Bus.$emit('viewProjectDetial');
    },
    viewHtdDetial (nodeId) {
      Bus.$emit('viewHtdDetial', nodeId);
    }
  },
  mounted () {
    this.getContractList();
    console.log('tree', this.tree);
  }
};
</script>
<style lang="less">
@shortWH: 5px;

.htd-box {
  //   background: gray;

  .contract-title,
  .contract-p {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: @shortWH;
    box-sizing: border-box;
    font-size:14px;
  }
  .view-btn {
    opacity: 0;
  }
  .contract-p:hover {
    color: #5a6fce;
    .view-btn {
      opacity: 1;
    }
    //  background: #e8eaec;
  }
  .contract-checked {
    background: #5a6fce !important;
    color: #fff !important;
      .view-btn {
        opacity: 1;
    }
  }
}
</style>
